<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
    <style type="text/css">
        #div1 {
            margin-left: 36px;
            margin-top: 20px;
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 92%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
        }

        th {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }

        td {
            text-align: center;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ddd
        }

        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            border-top-color: inherit;
            border-right-color: inherit;
            border-bottom-color: inherit;
            border-left-color: inherit;
        }

        #table1 {
            border-spacing: 0;
            border-collapse: collapse;
            width: 1400px;
        }
    </style>
    <script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function loadData() {
            $.ajax({
                url: "address/selectAddresses",
                data: {
                    userName: "${userName}",
                },
                dataType: "json",
                success: function (data) {
                    $("#content").empty()
                    $.each(data, function (i, n) {
                        $("#content").append("<tr>")
                            .append("<td>" + n.id + "</td>")
                            .append("<td>" + n.orderId + "</td>")
                            .append("<td>" + n.linkman + "</td>")
                            .append("<td>" + n.phone + "</td>")
                            .append("<td>" + n.province + "</td>")
                            .append("<td>" + n.city + "</td>")
                            .append("<td>" + n.area + "</td>")
                            .append("<td>" + n.detailedAddress + "</td>")
                            .append("<td><a href='address/removeAddress?id=" + n.id + "' style='text-decoration: none; color: #FF5555' " +
                                "onclick='return confirm(\"确定要删除该收货地址吗？\")'>" +
                                "<button style='padding: 3px 6px; background-color: palevioletred; color: snow; " +
                                "cursor: pointer; font-size: 16px; border: 1px solid skyblue'>删除</button>" +
                                "</a></td>")
                            .append("</tr>")
                    })
                }
            })
        }
        function loadInfo() {
            $.ajax({
                url: "user/queryInfo",
                data: {
                    userName: "${userName}"
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    $("#id").val(data.id)
                    $("#userName").val(data.userName)
                    $("#password").val(data.password)
                    $("#studentName").val(data.studentName)
                    $("#sex").val(data.sex)
                    $("#phone").val(data.phone)
                    $("#email").val(data.email)
                    $("#schoolName").val(data.schoolName)
                }
            })
        }
        $(function () {
            loadData()
            loadInfo()
            $("#commitBtn").click(function () {
                if (confirm("确定更新个人信息吗？")) {
                    var password = $("#password").val().trim();
                    if (password === "") {
                        alert("用户密码不能为空")
                        return false
                    }
                    var phone = $("#phone").val().trim();
                    if (phone === "") {
                        alert("手机号码不能为空")
                        return false
                    } else {
                        var regExp = /^[1-9][0-9]{10}$/
                        if (!regExp.test(phone)) {
                            alert("手机号码格式不正确")
                            return false
                        }
                    }
                    var email = $("#email").val().trim();
                    if (email === "") {
                        alert("邮箱地址不能为空")
                        return false
                    } else {
                        var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                        if (!regExp.test(email)) {
                            alert("邮箱地址不合法，格式错误")
                            return false
                        }
                    }
                    var data = $("#commitForm").serialize()
                    $.ajax({
                        url: "user/updateInfo",
                        data: data,
                        type: "post",
                        dataType: "text",
                        success: function (resp) {
                            alert(resp)
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<div id="div1">
    <h1 style="background-color: #5bc0de;" class="label">收货地址管理</h1>
    <br><br>
    <div>
        <table style="border: 1px solid #ddd;" id="table1">
            <thead style="background-color: #DFF0D8">
            <tr style="height: 30px">
                <th>ID</th>
                <th>订单编号</th>
                <th>收货人</th>
                <th>手机号码</th>
                <th>省份</th>
                <th>城市</th>
                <th>地区</th>
                <th>详细地址</th>
                <th colspan="2" align="center">操作</th>
            </tr>
            </thead>
            <tbody id="content">

            </tbody>
        </table>
    </div>
    <br><br>
    <h1 style="background-color: #5bc0de;" class="label">个人信息管理</h1>
    <br><br>
    <div align="center" style="margin-top: 30px">
        <form id="commitForm">
            <table style="line-height: 30px; width: 400px;
            border: 1px solid #faebcc">
                <tr style="color: #8a6d3b;
                           background-color: #fcf8e3;
                           border: 1px solid #faebcc;"
                    align="center">
                    <td colspan="2">个人信息</td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>账户</td>
                    <td>
                        <input type="text" id="userName" name="userName" readonly>
                    </td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>密码</td>
                    <td><input type="text"  id="password" name="password"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>姓名</td>
                    <td><input type="text" id="studentName" readonly></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>性别</td>
                    <td><input type="text" id="sex" readonly></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>联系电话</td>
                    <td><input type="text" id="phone" name="phone"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>Email</td>
                    <td><input type="text" id="email" name="email"></td>
                </tr>
                <tr align="center" style="line-height: 32px">
                    <td>学校</td>
                    <td><input type="text" id="schoolName" readonly></td>
                </tr>
                <tr style="line-height: 60px">
                    <td colspan="2" align="center">
                        <input type="button" id="commitBtn" style="
                          color: #fff; width: 200px; margin: 10px;
                          background-color: #5cb85c;
                          border-color: #4cae4c;
                          font-size: 18px;
                          font-weight: 400;
                          display: inline-block;
                          padding: 6px 12px;cursor: pointer;" value="更新个人信息">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>
